<template>
    <div class="page">
        <el-card>
            <div class="search l-f l-row-sb">
                <el-button type="primary" icon="el-icon-plus" size="small" @click="onAddDict">添加</el-button>
                <el-form ref="searchForm" :model="params" label-width="80px" :inline="true" size="small">
                    <el-form-item label="字典名称: ">
                        <el-input v-model="params.dict_name"></el-input>
                    </el-form-item>
                    <el-form-item label="字典编号: ">
                        <el-input v-model="params.dict_code"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="small" @click="getListData">查询</el-button>
                        <el-button type="primary" icon="el-icon-refresh-right" size="small"
                            @click="resetParamsForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="listData.list" style="width: 100%" v-loading="loading">
                <el-table-column prop="id" label="ID" width="280">
                </el-table-column>
                <el-table-column prop="dict_name" label="字典名称" min-width="150">
                </el-table-column>
                <el-table-column prop="dict_code" label="字典编号" min-width="150">
                </el-table-column>
                <el-table-column prop="description" label="描述" min-width="200">
                </el-table-column>
                <el-table-column label="操作" width="220">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)" type="text" icon="el-icon-edit">编辑</el-button>
                        <el-button @click="handleDrawer(scope.row)" type="text" icon="el-icon-setting">字典配置</el-button>
                        <el-button @click="handleDel(scope.row, scope.$index)" type="text"
                            icon="el-icon-delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="card-pagination l-f l-row-end">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="params.page" background :page-sizes="[10, 20, 50, 100]" :page-size="params.page_size"
                    layout="sizes, prev, pager, next" :total="listData.total">
                </el-pagination>
            </div>
        </el-card>
        <el-dialog :title="isEdit ? '编辑' : '新增'" :visible.sync="dialogVisible" width="600px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
                <el-form-item label="字典名称" prop="dict_name">
                    <el-input v-model="ruleForm.dict_name"></el-input>
                </el-form-item>
                <el-form-item label="字典编码" prop="dict_code">
                    <el-input v-model="ruleForm.dict_code"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="ruleForm.description"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
        <el-drawer title="字典列表" :visible.sync="drawer" direction="rtl" size="600px">
            <div style="padding: 20px;box-sizing: border-box;">
                <el-button type="primary" icon="el-icon-plus" size="small" @click="onAddTwo">新增</el-button>
                <el-table :data="twoListData" style="width: 100%">
                    <el-table-column prop="item_text" label="名称" min-width="100">
                    </el-table-column>
                    <el-table-column prop="item_value" label="数据值" min-width="100">
                    </el-table-column>
                    <el-table-column prop="description" label="描述" min-width="120">
                    </el-table-column>
                    <el-table-column prop="sort_order" label="排序" min-width="80">
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button @click="handleTwoEdit(scope.row)" type="text">编辑</el-button>
                            <el-button @click="handleTwoDel(scope.row)" type="text">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-drawer>
        <!-- 二级 -->
        <el-dialog :title="isTwoEdit ? '编辑' : '新增'" :visible.sync="twoDialogVisible" width="600px">
            <el-form :model="twoRuleForm" :rules="twoRules" ref="twoRuleForm" label-width="100px">
                <el-form-item label="字典名称" prop="item_text">
                    <el-input v-model="twoRuleForm.item_text"></el-input>
                </el-form-item>
                <el-form-item label="字典编码" prop="item_value">
                    <el-input v-model="twoRuleForm.item_value"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="twoRuleForm.description"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input-number v-model="twoRuleForm.sort_order" :min="0" :max="999999"></el-input-number>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="twoDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="twoSubmitForm('twoRuleForm')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
import { getListDataApi, addDictApi, editDictApi, delDictApi,getTwoListDataApi,
    addTwoDictApi,editTwoDictApi,delTwoDictApi } from '@/api/dict';
export default {
    data() {
        return {
            params: {
                page: 1,
                page_size: 10,
                dict_name: '',
                dict_code: ''
            },
            listData: {
                list: [],
                total: 0
            },
            loading: false,
            dialogVisible: false,
            isEdit: false,
            ruleForm: {
                dict_name: '',
                dict_code: '',
                description: ''
            },
            rules: {
                dict_name: [
                    { required: true, message: '请输入字典名称', trigger: 'blur' }
                ],
                dict_code: [
                    { required: true, message: '请输入字典编码', trigger: 'blur' }
                ],
            },
            drawer: false,
            twoListData: [],
            isTwoEdit: false,
            twoDialogVisible: false,
            twoRuleForm: {
                dict_id: '',
                item_text: '',
                item_value: '',
                description: '',
                sort_order: 0
            },
            twoRules: {
                item_text: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ],
                item_value: [
                    { required: true, message: '请输入数据值', trigger: 'blur' }
                ],
            },
        }
    },
    created() {
        this.getListData()
    },
    methods: {
        getListData() {
            getListDataApi(this.params).then(res => {
                this.listData.list = res.items
                this.listData.total = res.total
                this.loading = false
            })
        },
        handleEdit(row) {
            this.ruleForm.id = row.id
            this.ruleForm.dict_name = row.dict_name
            this.ruleForm.dict_code = row.dict_code
            this.ruleForm.description = row.description

            this.isEdit = true
            this.dialogVisible = true
        },
        handleDel(row, index) {
            this.$confirm('确定删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delDictApi({
                    id: row.id
                }).then(res => {
                    this.$message.success('删除成功!')
                    this.getListData()
                }).catch(() => {
                    this.$message.success('删除失败')
                })
            })
        },
        onAddDict() {
            this.ruleForm = {
                dict_name: '',
                dict_code: '',
                description: ''
            }
            this.isEdit = false
            this.dialogVisible = true
        },
        onAddTwo() {
            this.twoRuleForm.item_text = ''
            this.twoRuleForm.item_value = ''
            this.twoRuleForm.description = ''
            this.twoRuleForm.sort_order = 0

            this.isTwoEdit = false
            this.twoDialogVisible = true
        },
        handleTwoEdit(row) {
            this.twoRuleForm.id = row.id
            this.twoRuleForm.item_text = row.item_text
            this.twoRuleForm.item_value = row.item_value
            this.twoRuleForm.description = row.description
            this.twoRuleForm.sort_order = row.sort_order

            this.isTwoEdit = true
            this.twoDialogVisible = true
        },
        handleTwoDel(row, index) {
            this.$confirm('确定删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delTwoDictApi({
                    id: row.id
                }).then(res => {
                    this.$message.success('删除成功!')
                    this.getTwoListData()
                }).catch(() => {
                    this.$message.success('删除失败')
                })
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.isEdit) {
                        editDictApi(this.ruleForm).then(res => {
                            this.$message.success("编辑成功")
                            this.dialogVisible = false
                            this.getListData()
                        }).catch(err => {
                            this.$message.error("编辑失败")
                        })
                    } else {
                        addDictApi(this.ruleForm).then(res => {
                            this.$message.success("添加成功")
                            this.dialogVisible = false
                            this.getListData()
                        }).catch(err => {
                            this.$message.error("添加失败")
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        twoSubmitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.isTwoEdit) {
                        editTwoDictApi(this.twoRuleForm).then(res => {
                            this.$message.success("编辑成功")
                            this.twoDialogVisible = false
                            this.getTwoListData()
                        }).catch(err => {
                            this.$message.error("编辑失败")
                        })
                    } else {
                        addTwoDictApi(this.twoRuleForm).then(res => {
                            this.$message.success("添加成功")
                            this.twoDialogVisible = false
                            this.getTwoListData()
                        }).catch(err => {
                            this.$message.error("添加失败")
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleDrawer(row) {
            this.drawer = true
            this.twoRuleForm.dict_id = row.id
            this.getTwoListData()
        },
        getTwoListData() {
             // 获取二级
             getTwoListDataApi({
                page: 1,
                page_size: 100,
                dict_id: this.twoRuleForm.dict_id
            }).then(res => {
                this.twoListData = res.items
            })
        },
        resetParamsForm() {
            this.params.dict_name = ''
            this.params.dict_code = ''
            this.getListData()
        },
        handleSizeChange(val) {
            this.params.page_size = val
            this.getListData()
        },
        handleCurrentChange(val) {
            this.params.page = val
            this.getListData()
        }
    }
}
</script>
  
<style lang="scss" scoped></style>